<template>
  <div>
    <el-input
      v-model="todoItem.name"
      placeholder="请输入内容"
      class="todoInput"
    />
    <el-button
      type="primary"
      class="addBtn"
      @click="addTodo"
    >添加</el-button>
  </div>
</template>
<script>
export default {
  name: 'TodoInput',
  data() {
    return {
      todoItem: {
        name: '',
        done: false,
        createTime: ''
      },
      todolist: [],
    }
  },
  methods: {
    addTodo() {
      // 判断是否输入
      if (this.todoItem.name.length === 0) {
        this.$message({ message: '请输入要做的事情哦！！！', type: 'info' })
        return false
      } else {
        // 将输入框的值添加到todoList
        this.$store.dispatch('addItem', this.todoItem)
        // 天加成功后清空输入框
        this.todoItem.name = ''
      }
    },
  },
}
</script>
<style lang="less" scoped>
.el-input {
  width: 400px;
}
.el-button {
  margin-left: 20px;
  float: right;
}
.globar-blur-glass {
  z-index: -1;
  content: '';
  position: absolute;
  backdrop-filter: blur(var(--glass-blur));
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.2s;
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
}
</style>
